<!--
 * @Author: jhw
 * @Date: 2025-08-05 10:22:40
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-05 16:01:44
 * @Description:
-->
<template>
  <div key="id">
    <div class="flex items-center mb-10px">
      <div class="mr-10px">选项</div>
      <el-button size="small" :icon="Plus" circle @click="addOptionHandle" />
    </div>
    <div v-for="(_, index) in status" :key="index" class="flex items-center">
      <el-input :placeholder="`选项${index + 1}`" class="mt-5px mb-5px" v-model="textArr[index]" />
      <el-button
        type="danger"
        class="ml-10px"
        size="small"
        :icon="Minus"
        circle
        @click="removeOption(index)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UpdateStatus, VueComType } from '@/types';
import { Plus, Minus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { inject, ref } from 'vue';

const props = defineProps<{
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const textArr = ref(props.status);
const updateStatus = inject<UpdateStatus>('updateStatus');

const addOptionHandle = () => {
  if (updateStatus) {
    updateStatus(props.configKey);
  } else {
    console.error('updateStatus is not found');
  }
};

const removeOption = (index: number) => {
  if (textArr.value.length === 2) return ElMessage.error('至少保留两个选项');
  // textArr.value.splice(index, 1);
  if (updateStatus) {
    updateStatus(props.configKey, index);
  } else {
    console.error('updateStatus is not found');
  }
};
</script>

<style scoped></style>
